<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		 #d1{
			 height: 200px;
			 width: 400px;
			 overflow: hidden;
			 margin: 200px auto;
			  cursor: pointer;
		 }
		 #d1:hover{
			 
			transform: rotate(180deg); 
		 }
		 .d2,.d3,.d4,.d5{
			 height: 300px;
			 width: 400px;
			 text-align: center;
			 line-height: 300px;
			 font-family: "楷体";
			 font-size: 50px;
			 border: 4px solid goldenrod;
			 border-radius: 10px;
		 }
		 .d2:hover{
			 transform: rotateX(180deg);
			/* transform: rotate(180deg); */
			/* transform: rotatez(90deg); */
		 }
		 .d3:hover{
		 	transform: rotateY(180deg);
		 			
		 }
		 .d4:hover{
		 	transform: rotateZ(180deg);
		 			
		 }
		 
		 .d5:hover{
		 	transform: rotate3d(1,1,1,60deg);
		 			
		 }
		</style>
	</head>
	<body>
		<div id="d1">
			<img src="../day10/reg-mobile.jpg" height="200px" width="400px"/>
		</div>
		<div class="d2">
			气度决定成就
		</div>
		<div class="d3">
			教育改变生活
		</div>
		<div class="d4">
			教育改变生活
		</div>
		
		<div class="d5">
			教育改变生活
		</div>
	</body>
</html>
